
import React, { Component } from 'react';

class PreviewDialog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            posTop: -240,
        };
    }
    componentDidMount() {
        const target = $(this.refs.previewImg);
        target.load(() => {
            this.setState({
                posTop: -(target.height() + 50) / 2,
            });
        });
    }
    handleOnCloseDialog() {
        const { closeDialog } = this.props.handlers;
        closeDialog();
    }
    render() {
        const data = this.props.context;
        const rStyle = {
            top: '50%',
            left: '50%',
            width: '700px',
            height: 'auto',
            display: 'block',
            borderRadius: '5px',
            overflow: 'hidden',
            margin: '0 0 0 -350px',
            marginTop: `${this.state.posTop}px`,
        };
        return (
          <dialog ref="dialog" style={rStyle} className="btg-modal widget-form preview-form">
            <div className="btg-modal-content">
              <form noValidate name="form.name" className="form-horizontal">
                <div className="widget-form-title">
                  <label>{$._('Preview AR Effect')}</label>
                </div>
                <div className="widget-form-content">
                  <div className="widget-form-left">
                <img src={data.picture.media_src} ref="previewImg" />
              </div>
                  <div className="widget-form-right">
                <div className="widget-form-name">{data.resource_tag_title}</div>
                <div className="widget-form-desc">
                  <ul>
                      <li>1.{$._('Mobile open huanshi app')}</li>
                      <li>2.{$._('The identification of AR effect')}</li>
                    </ul>
                </div>
              </div>
                </div>
              </form>
            </div>
            <a href="#" onClick={e => this.handleOnCloseDialog(e)} className="modal-close icon-close" />
          </dialog>
        );
    }
}

export default PreviewDialog;
